<template>
  <div class="user_wrap">
    <BreadCrumb crumb="SPU管理>新增SPU"></BreadCrumb>
    <div class="center_wrap">
      <h1 class="spu_form_title">新增SPU</h1>
      <el-form :model="SpuForm" status-icon ref="SpuForm" label-width="100px">
        <el-form-item label="SPU名称" prop="name">
          <el-input
            type="text"
            v-model="SpuForm.name"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="品牌：" prop="brand">
          <el-select v-model="SpuForm.brand" size="small">
            <el-option
              v-for="item in brand_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一级分类：" prop="category1">
          <el-select
            v-model="SpuForm.category1"
            size="small"
            @change="fnGetCategory_sub(SpuForm.category1, 2)"
          >
            <el-option
              v-for="item in category1_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类：" prop="category2">
          <el-select
            v-model="SpuForm.category2"
            size="small"
            @change="fnGetCategory_sub(SpuForm.category2, 3)"
          >
            <el-option
              v-for="item in category2_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类：" prop="category3">
          <el-select v-model="SpuForm.category3" size="small">
            <el-option
              v-for="item in category3_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品详情:">
          <div class="tiny_con">
            <div class="custom_img" @click="pop_show = true"></div>
            <editor v-model="SpuForm.desc_detail" :init="init"></editor>
          </div>
        </el-form-item>

        <el-form-item label="商品包装:">
          <div class="tiny_con">
            <div class="custom_img" @click="pop_show = true"></div>
            <editor v-model="SpuForm.desc_pack" :init="init"></editor>
          </div>
        </el-form-item>

        <el-form-item label="售后服务:">
          <div class="tiny_con">
            <div class="custom_img" @click="pop_show = true"></div>
            <editor v-model="SpuForm.desc_service" :init="init"></editor>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <!-- <el-button @click="aaa">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>

    <el-dialog title="上传插入的图片" :visible.sync="pop_show" append-to-body>
      <el-form status-icon label-width="100px">
        <img :src="upload_img_url" class="upload_pic_show" />
        <el-form-item label="上传图片" prop="logo">
          <el-upload action="" :auto-upload="false">
            <el-button size="small" type="primary">点击选择图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fnUpload">{{ btn_text }}</el-button>
          <el-button type="primary" @click="fnInsertPic">插入图片</el-button>
          <el-button @click="pop_show = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
let token = localStorage.token;
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/modern/theme";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import BreadCrumb from "@/components/widget/BreadCrumb";
import cons from "@/components/constant";
export default {
  name: "SpuAdd",
  data() {
    return {
      pop_show: false,
      upload_img_url: "/static/images/pic_bg.png",
      btn_text: "提交",
      init: {
        language_url: "/static/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "/static/tinymce/skins/lightgray",
        width: "99%",
        height: 200,
        branding: false,
        menubar: false,
        plugins: "lists media table textcolor wordcount contextmenu",
        toolbar:
          "undo redo |  styleselect | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists media table | removeformat",
      },
      brand_list: [],
      category1_list: [],
      category2_list: [],
      category3_list: [],
      SpuForm: {
        name: "",
        brand: "",
        category1: "",
        category2: "",
        category3: "",
        desc_detail: "",
        desc_pack: "",
        desc_service: "",
      },
    };
  },
  components: {
    BreadCrumb,
    Editor,
  },
  methods: {
    // 获取所有的品牌信息
    fnGetBrand: function () {
      let token = localStorage.token;
      this.axios
        .get(cons.apis + "/goods/brands/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          console.log(">>>", dat.data);
          this.brand_list = dat.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 一级分类
    fnGetCategories: function () {
      let token = localStorage.token;
      this.axios
        .get(cons.apis + "/goods/channels/firstCate/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          console.log("获取cate1一级类别的响应??", dat);
          this.category1_list = dat.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取二级及三级类别
    fnGetCategory_sub: function (sid, num) {
      let token = localStorage.token;
      this.axios
        .get(cons.apis + "/goods/channel/categories/" + sid + "/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          console.log("获取cate2,3级类别的响应??", dat);
          this["category" + num + "_list"] = dat.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submitForm() {
      this.axios
        .post(cons.apis + "/goods/spus/", this.SpuForm, {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          console.log("SPU添加的响应??", dat);
          if (dat.status == 201) {
            this.$message({
              type: "success",
              message: "SPU添加成功!",
            });

            setTimeout(() => {
              this.$router.push({ path: "/home/spu" });
            }, 2000);
          }
        })
        .catch((err) => {
          if (err.response.status == 400) {
            var errmsg = err.response.data;

            if (errmsg.name) {
              this.$message({
                type: "info",
                message: errmsg.name[0],
              });
            }

            if (errmsg.non_field_errors) {
              this.$message({
                type: "info",
                message: errmsg.non_field_errors[0],
              });
            }
          }
        });
    },
    fnUpload: function () {
      this.btn_text = "上传中...";
      let fileValue = document.querySelector(".el-upload .el-upload__input");
      let fd = new FormData();
      fd.append("image", fileValue.files[0], fileValue.files[0].name);

      this.axios
        .post(cons.apis + "/goods/images/", fd, {
          headers: {
            Authorization: "JWT " + token,
            "Content-Type": "multipart/form-data",
          },
          responseType: "json",
        })
        .then((dat) => {
          this.upload_img_url = dat.data.img_url;
          this.btn_text = "提交";
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    fnInsertPic() {
      var sImg = '<img src="' + this.upload_img_url + '">';
      if (sImg == "/static/images/pic_bg.png") {
        alert("请上传图片后，再插入图片！");
        return;
      }
      tinymce.execCommand("mceInsertContent", false, sImg);
      this.pop_show = false;
    },
  },
  mounted() {
    tinymce.init({});
    // 获取品牌
    this.fnGetBrand();
    // 获取一级类别
    this.fnGetCategories();
  },
};
</script>

<style scoped>
.center_wrap {
  width: 95.2%;
  overflow: hidden;
  margin: 10px auto 10px;
}
.spu_form_title {
  line-height: 24px;
  font-size: 18px;
  color: #303133;
  margin: 10px 0px 20px;
}
.tiny_con {
  position: relative;
}
.custom_img {
  width: 16px;
  height: 13px;
  background: url("/static/images/imgicon.png") no-repeat;
  position: absolute;
  left: 698px;
  top: 12px;
  z-index: 9990;
  cursor: pointer;
}
.upload_pic {
  height: 330px;
}
.upload_pic_show {
  display: block;
  width: 240px;
  height: 180px;
  margin: 15px auto 10px;
}
</style>
